<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>个人资料</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="viewport" content="width=750, minimum-scale=0.4, target-densitydpi=device-dpi,user-scalable=no,">  	
    <link rel="stylesheet" type="text/css" href="../css/m.jui.css" />
    <link rel="stylesheet" type="text/css" href="../css/all.css" />
</head>
	<body>
		<div class="page-group">
			<div class="page page-current" id="rounter">			
				<div class="jui-flexview">
					<div class="jui-scrollview">
					 	<header class="jui-bar jui-barwhite" style="background: #FFFFFF;color: #2a2a2a;">
							<p class="iconfont fl" onclick="history.go(-1)">&#xe7e0;</p>
							<h1 class="title" style="color:#2a2a2a;">个人资料</h1>
							<p class="fr" style="font-size: .34rem;color:#2a2a2a;">完成</p>
						</header>
						<!--头部-->	
						<div class="jui-list-block" style="margin-top: .2rem;">							
							<div class="jui-list-content">
				                <div class="jui-list-center">
				                    <div class="center-title">头像</div>
				                    <p class="right-text iconfont">&#xe629;</p>
				                    <img src="../img/11_02.jpg" class="personal_img fr"/>
				                </div>
			          	 	</div>							
						<a href="#rounter2">	
							<div class="jui-list-content">
				                <div class="jui-list-center">
				                    <div class="center-title">昵称</div>
				                    <p class="right-text iconfont">&#xe629;</p>
				                    <p class="center-text" style="width: 50%;text-align: right;float: right;">小明</p>
				                </div>
				            </div>
				        </a>    
							<div class="jui-list-content" id="pickerBtn">
				                <div class="jui-list-center">
				                    <div class="center-title">性别</div>
				                    <p class="right-text iconfont">&#xe629;</p>
				                    <p class="center-text" style="width: 50%;text-align: right;float: right;">
				                    	<input type="text" id="" disabled="" value="男" style="text-align: right;background: none;" />
				                    </p>
				                </div>
				            </div>	 
				        <a href="#rounter3">
							<div class="jui-list-content">
				                <div class="jui-list-center">
				                    <div class="center-title">邮箱</div>
				                    <p class="right-text iconfont">&#xe629;</p>
				                </div>
				            </div>	 
				        </a>
							<div class="jui-list-content">
				                <div class="jui-list-center">
				                    <div class="center-title">我的收货地址</div>
				                    <p class="right-text iconfont">&#xe629;</p>
				                </div>
				            </div>	 			            
						</div>
					</div>
				</div>			
			</div>	
			<div class="page" id="rounter2">			
				<div class="jui-scrollview">
				 	<header class="jui-bar jui-barwhite" style="background: #FFFFFF;color: #2a2a2a;">
						<p onclick="history.go(-1)" class="iconfont fl">&#xe7e0;</p>
						<h1 class="title" style="color:#2a2a2a;">修改昵称</h1>
						<p onclick="history.go(-1)" class="fr" style="font-size: .34rem;color:#2a2a2a;">保存</p>
					</header>
					<!--头部-->	
					<div class="jui-list-block" style="margin-top: .2rem;">
						<div class="jui-list-content">
		                    <div class="jui-list-center">
		                        <div class="center-input"  style="width: 90%;">
		                            <input type="text" name="" id="" placeholder="请输入新昵称" value="">
		                        </div>
		                    </div>
		                </div>         
					</div>
				</div>
			</div>
			<div class="page" id="rounter3">			
				<div class="jui-scrollview">
				 	<header class="jui-bar jui-barwhite" style="background: #FFFFFF;color: #2a2a2a;">
						<p onclick="history.go(-1)" class="iconfont fl">&#xe7e0;</p>
						<h1 class="title" style="color:#2a2a2a;">修改邮箱</h1>
						<p onclick="history.go(-1)" class="fr" style="font-size: .34rem;color:#2a2a2a;">保存</p>
					</header>
					<!--头部-->	
					<div class="jui-list-block" style="margin-top: .2rem;">
						<div class="jui-list-content">
		                    <div class="jui-list-center">
		                        <div class="center-input"  style="width: 90%;">
		                            <input type="email" name="" id="" placeholder="请输入新邮箱" value="">
		                        </div>
		                    </div>
		                </div>         
					</div>
				</div>
			</div>				
		</div>
	<script src="../../js/jquery-3.1.1.js"></script>
	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>		
	
	<script type="text/javascript" src="../js/jui-picker.js" ></script>	
	<script>
      var inputss =document.getElementById('pickerBtn')
   	  var ps =inputss.getElementsByTagName('input')[0]
        document.querySelector('#pickerBtn').addEventListener('click', function () {
            jui.picker([{
                label: '男',
                value: 0
            },{
                label: '女',
                value: 1
            }], {
                defaultValue: ['通讯费'],
                className: 'custom-classname',
                onChange: function onChange(result) {
                    //console.log(item, index);
                    console.log(result);
                },
                onConfirm: function onConfirm(result) {
					ps.value=result[0].label
                },
                id: 'picker'
            });
        });				
	</script>
	</body>
</html>
